import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as counterActions from '../../actions/city';
import './index.less'
import HomeHeader from './HomeHeader';
import Swiper from '../../component/Swiper'
import FooterNav from '../../component/FootNav'
import {getData} from '../../utils/http'
import banner1 from '../../static/images/banner1.png'
import banner2 from '../../static/images/banner2.png'
import banner3 from '../../static/images/banner3.png'
import banner4 from '../../static/images/banner4.png'
import banner5 from '../../static/images/banner5.png'
import banner6 from '../../static/images/banner6.png'

class Home extends Component {
    state={
        banner:[banner1,banner2,banner3,banner4,banner5,banner6],
        hotHouseArr:[]
    }
    componentDidMount(){
        getData('/api/search').then(data=>this.setState({
            hotHouseArr:data.data
        }))
    }
    render() {
        return (
            <div>
              <HomeHeader/>
              <div className="banner">
              <Swiper/>
              </div>
              <div className="btnBox">
                  <div>找室友</div>
                  <div>自如社区</div>
              </div>
              <div className="hotHouse">
                  <h3>热门房源</h3>
                  <div className="content">
                      <ul>
                          {this.state.hotHouseArr.length>0&&this.state.hotHouseArr.map((item,index)=>{
                              return <li key={index} className='houseList'>
                                  <img src={this.state.banner[index]} alt=""/>
                                  <div className="titleBar">
                                      <div className="left">
                                      <span>{item.title}</span>
                                      <span>{item.houseType}</span>
                                      </div>
                                      <div className="right"><span>{item.rentType}</span></div>
                                  </div>
                              </li>
                          })}
                      </ul>
                  </div>
              </div>
             <FooterNav/>
            </div>
        );
    }
}
const mapStateToProps = (state)=>{
    return{
        counter:state.counter
    }
}
const mapDispatchToProps = (dispatch)=>{
    return {
        counterActions:bindActionCreators(counterActions,dispatch)
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);